import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Table, Image, Button, Space, Modal, Form, Input, Row, Col } from 'antd'
import withLogin from '../../components/withLogin'
import ModifyList from '../../components/modifyList'

type Props = {}

interface ListItemType {
	'title': string,
	'url': string,
	'id': string,
	"address": string,
	"key": string
}

const Index = (props: Props) => {
	// 获取用户的信息
	const role = localStorage.getItem('role')
	// 获取列表数据
	const getList = async () => {
		const resp = await axios.get('/api/list')
		setList(resp.data.data)
	}
	// 单个 删除列表数据
	const delList = async (keys: string[]) => {
		const resp = await axios.post('/api/list/delete', { keys })
		if (resp.data.code === 200)
			getList()
		else
			alert('删除失败！！！！！')
	}
	// 点击编辑按钮
	const onEdit = (cord: ListItemType) => {
		setVisible(true)
	
		setEditData(cord)
	}
	// 表格的标题
	const columns = [
		{
			title: '标题',
			dataIndex: 'title',
			key: 'title',
		},
		{
			title: 'ID',
			dataIndex: 'id',
			key: 'id',
		},
		{
			title: '住址',
			dataIndex: 'address',
			key: 'address',
		},
		{
			title: '图片',
			dataIndex: 'url',
			key: 'url',
			render(url: string) {
				return <Image src={url} height={20}></Image>
			}
		},
		{
			title: '操作',
			render(cord: ListItemType) {
				return (
					<Space>
						<Button type='primary'>查看</Button>
						{
							withLogin(<Button type='primary' onClick={() => onEdit(cord)}>编辑</Button>)
						}
						{
							withLogin(<Button type='primary' danger onClick={() => delList([cord.key])}>删除</Button>)
						}
					</Space>
				)
			}
		},
	];
	// 数据
	const [list, setList] = useState<ListItemType[]>([])
	const [selectedRowKeys, setSelectedRowKeys] = useState([])
	const onChange = (selectedRowKeys) => {
		setSelectedRowKeys(selectedRowKeys)
	}
	// 副作用函数
	useEffect(() => {
		// 发请求
		getList()
	}, [])




	/************************ 编辑 **************************/
	const [visible, setVisible] = useState(false)
	const [editData, setEditData] = useState<ListItemType>({
		title: '',
		address: '',
		url: '',
		key: '',
		id: ''
	})

	const onOk = () => {
		setVisible(false)
		axios.post('/api/list/edit', editData).then(resp => {
			getList()
		})
	}
	const onCancel = () => {
		setVisible(false)
	}
	return (
		<div>
			{selectedRowKeys.length !== 0 && <Button type='primary' danger onClick={() => delList(selectedRowKeys)}>删除选中</Button>}
			<Table
				rowSelection={{
					type: 'checkbox',
					selectedRowKeys,
					onChange
				}}
				dataSource={list}
				columns={columns}></Table>
			<ModifyList visible={visible} onOk={onOk} onCancel={onCancel}>
				<Row>
					<Col span={4}>标题：</Col>
					<Col span={16}><Input value={ editData.title } onChange={ e => setEditData({ ...editData, title: e.target.value }) }></Input></Col>
				</Row>
				<Row>
					<Col span={4}>地址：</Col>
					<Col span={16}><Input value={ editData.address } onChange={ e => setEditData({ ...editData, address: e.target.value }) }></Input></Col>
				</Row>
			</ModifyList>
		</div>
	)
}

export default Index